<template>
  <div class="payment-flow-container">
    <!-- 顶部标题栏 -->
    <div class="page-header">
      <h1 class="page-title">门诊缴费</h1>
      <div class="step-indicator">{{ currentStepText }}</div>
    </div>

    <!-- 步骤指示器 -->
    <div class="steps-container">
      <div class="steps">
        <div
          class="step-item"
          :class="{ active: currentStep === 1, completed: currentStep > 1 }"
          @click="goToStep(1)"
        >
          <div class="step-number">1</div>
          <div class="step-label">费用清单</div>
        </div>
        <div
          class="step-item"
          :class="{ active: currentStep === 2, completed: currentStep > 2 }"
          @click="goToStep(2)"
        >
          <div class="step-number">2</div>
          <div class="step-label">选择支付</div>
        </div>
        <div
          class="step-item"
          :class="{ active: currentStep === 3 }"
          @click="goToStep(3)"
        >
          <div class="step-number">3</div>
          <div class="step-label">支付结果</div>
        </div>
      </div>
    </div>

    <!-- 动态组件渲染 -->
    <component
      :is="currentComponent"
      :payment-data="paymentData"
      @next-step="handleNextStep"
      @prev-step="handlePrevStep"
      @payment-success="handlePaymentSuccess"
      @payment-failed="handlePaymentFailed"
      @change-payment-method="handleChangePaymentMethod"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed, reactive } from "vue";
import { useRouter } from "vue-router";
import PaymentDetail from "./componentsPayment/PaymentDetail.vue";
import PaymentMethod from "./componentsPayment/PaymentMethod.vue";
import PaymentResult from "./componentsPayment/PaymentResult.vue";

const router = useRouter();

// 当前步骤
const currentStep = ref(1);

// 支付数据
const paymentData = reactive({});

// 当前步骤文本
const currentStepText = computed(() => {
  const steps = {
    1: "步骤 1/3：费用清单",
    2: "步骤 2/3：选择支付方式",
    3: "步骤 3/3：支付结果",
  };
  return steps[currentStep.value];
});

// 当前组件
const currentComponent = computed(() => {
  const components = {
    1: PaymentDetail,
    2: PaymentMethod,
    3: PaymentResult,
  };
  return components[currentStep.value];
});

// 下一步
const handleNextStep = (data) => {
  if (currentStep.value < 3) {
    Object.assign(paymentData, data);
    currentStep.value++;
  }
};

// 上一步
const handlePrevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
  }
};

// PaymentMethod.vue中支付成功,传递支付结果到这里
const handlePaymentSuccess = async (result) => {
  Object.assign(paymentData, result, { status: "success" }); // 添加这行
  currentStep.value = 3;
};

// 支付失败
const handlePaymentFailed = (result) => {
  Object.assign(paymentData, result, { status: "failed" });
  currentStep.value = 3;
};

// 更换支付方式
const handleChangePaymentMethod = () => {
  currentStep.value = 2;
};

// 跳转到指定步骤
const goToStep = (step) => {
  if (step < currentStep.value) {
    currentStep.value = step;
  }
};

onMounted(() => {
  const currentPatientVisit = JSON.parse(
    localStorage.getItem("currentPatientVisit")
  );
  if (!currentPatientVisit) {
    localStorage.clear();
    router.push("/self-service");
  }
});
</script>

<style lang="scss" scoped>
.payment-flow-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eaeef2;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2f3d;
}

.step-indicator {
  color: #606266;
  font-size: 14px;
  background: #f5f7fa;
  padding: 6px 12px;
  border-radius: 16px;
}

.steps-container {
  margin-bottom: 32px;
}

.steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: #e4e7ed;
    z-index: 1;
  }
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: all 0.3s;

  &.completed .step-number {
    background: #10b981;
    color: white;
  }

  &.active .step-number {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
  }
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e4e7ed;
  color: #909399;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.step-label {
  font-size: 14px;
  color: #909399;
  font-weight: 500;

  .step-item.active & {
    color: #3b82f6;
    font-weight: 600;
  }

  .step-item.completed & {
    color: #10b981;
  }
}

@media (max-width: 768px) {
  .payment-flow-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .steps {
    &::before {
      left: 40px;
      right: 40px;
    }
  }

  .step-number {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .step-label {
    font-size: 12px;
  }
}
</style>